<template>
  <div class="asideWrapper">
    <div class="avator">
      <img src="../../assets/logo.png" class="logo">
      <p>明理苑</p>
    </div>
    <router-link :to="'/editnews'" class="item">
      发帖
    </router-link>
    <router-link :to="'/artical'" class="item">
      文章管理
    </router-link>
    <router-link :to="'/usermanager'" class="item" v-if="root < 2">
      人员管理
    </router-link>
    <router-link :to="'/labelmanager'" class="item" v-if="root < 2">
      标签管理
    </router-link>
    <div class="item logout" @click="logout">
      退出账号
    </div>
    <div class="wrapper" 
    v-if="loading" 
    element-loading-text="拼命加载中"
    v-loading="loading"></div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import router from '../../router'
  export default {
    name: 'NavBar',
    data () {
      return {
        loading: false
      }
    },
    computed: {
      ...mapGetters([
        'root'
      ])
    },
    methods: {
      logout () {
        this.$confirm('此操作将退出登录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          window.localStorage.hasLogin = 200
          document.cookie = 'token=9999'
          this.loading = true
          setTimeout(() => {
            this.loading = false
            router.push('/login')
          }, 3000)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .asideWrapper
    background: #394b6b
    width: 100%
    height: 100%
    min-height: 850px
    display: flex
    flex-direction: column
    .wrapper
      width: 2000px
      height: 1000px
      position: absolute
      top: 0px
    .avator
      color: white
      width: 100%
      height: 180px
      text-align: center
      .logo
        margin-top: 30px
        width: 80px
        height: 80px
    .logout
      &:hover
        cursor:pointer
    .item
      color: white
      text-decoration: none
      width: 100%
      height: 80px
      box-sizing: border-box
      display: flex
      align-items: center
      justify-content: center
      border-top: 1px #556480 solid
      border-bottom: 1px #556480 solid
      &.router-link-active
        border-right: 4px solid #00c0dd 
        background: #2d3b55
</style>
